<template>
    <div class="list" v-if="dirs.length">
        <a
        href="#"
        class="item py-1 px-2 my-2 d-flex align-items-center" :class="[index % 2 ? 'bg-secondary text-white' : 'bg-light text-secondary']"
        v-for="(doc, index) in dirs" @click.prevent="$emit('click', doc)">
            <span class="mr-1 my-2">{{doc.name}}</span>
            <slot name="editbar" v-bind="{doc, index}" v-if="editing">
                
            </slot>
        </a>
    </div>
    <div class="list text-center" v-else>
        <div class="item p-2 my-2 bg-white text-info">
            无子目录
        </div>
    </div>
    
</template>

<script type="text/javascript">
export default {
    props: ['arr', 'editing'],
    data() {
        return {
            dirs: this.arr.slice()
        }
    },
}
</script>

<style type="text/css" scoped>
    
.list>.item:focus {
    outline: none;
    animation: bounce 1s .3s;
}

.list>.item {
    border-radius: 5px;
    cursor: pointer;
    word-break: break-all;
}
</style>